<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>

<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<link rel="stylesheet" type="text/css"	href="${pageContext.request.contextPath}/css/style.css">
<!-- <link rel="stylesheet" type="text/css" href="css/style.css">

<link rel="stylesheet" href="css/jquery-ui.css" /> -->
<link rel="stylesheet"	href="${pageContext.request.contextPath}/css/jquery-ui.css" />


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">




<script type="text/javascript" 	src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui.js"></script>

<script type="text/javascript" 	src="${pageContext.request.contextPath}/js/script.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/floating-1.12.js"></script>


<script type="text/javascript">
	$(document).ready(function(){

		$("#tabs").tabs();		
		var activePanel = $( "#tabs" ).tabs( "option", "active" );		
		var cedulla = ${form.user.cedulla};		
		var currentSemester = "${form.user.currentSemester}";		
		var userType = "${form.user.userType}";		
		populateQuestions("${pageContext.request.contextPath}/spring/fetchQuestions",activePanel,cedulla,currentSemester,userType);
		});
		
	$(document).ready(function($)  
    {  
        $('#floatdiv').addFloating(  
            {  
                targetRight: 10,  
                targetTop: 10,  
                snap: true  
            });  
            
            
        $('.x input').change(function () {
                
        var total=$('input:radio').length / 4;
        var sel = $('input:radio:checked').length;
        var percent = ((sel/total)*100).toFixed(2);
        
        $('#totalQuestions').text(total);
        $('#selectedQuestions').text(sel);
        $('#surveyCompleteness').text(percent+"%");
        
        
        if(total==sel){
        $("#surveySubmit").removeAttr('disabled');
        }
    });     
            
    }); 	
	
</script>


<title>Survey on progress !!</title>
</head>
<body>



	<div id="floatdiv" >

			<table width="100%">
			<tr ><th colspan="2" style="background-color: black;color: white;"><strong>Survey Completeness</strong></th></tr>
				<tr>
					<td>Total Questions</td><td id="totalQuestions">&nbsp;</td>
				</tr>
				<tr>
					<td>Selected Questions</td><td id="selectedQuestions">&nbsp;</td>
				</tr>
				<tr>
					<td>Survey Completeness</td><td id="surveyCompleteness">&nbsp;</td>
				</tr>

			</table>
		</div>
		
		
		
		
	<div id="surveyDiv" align="center">
		<form:form method="post" modelAttribute="form">



			




			<div id="tabs" style="width: 900px;font-size: 10px;" align="center">
			
			<table style="width: 100%;margin-top: 10px;font-family: arial">
				<tr>
					<th style="text-align: left;"><h3>${form.user.userName}</h3><br />${form.user.cedulla}
					</th>
					<th style="text-align: center;"><h2>Evaluacion Profescores System</h2>
					</th>
					<th style="text-align: right;">
					<c:if test="${form.user.userType eq 'STUDENT'}">Semester :	${form.user.currentSemester}</c:if>
					
						<br /><br />Department :
						${form.user.department}<br /> <br />User Type : ${form.user.userType}
					</th>
				</tr>
				<tr>
					<th colspan="2"></th>
				</tr>
				
			</table>
			
				<ul  style="font-size: 10px;">
					<c:forEach items="${form.subjects}" var="subject" varStatus="status">
					<c:if test="${status.index eq 0}">
					<li id="${subject.subjectId}"><a href="#tabs-${status.index}">${subject.subjectName}</a></li>
					</c:if>
					<c:if test="${status.index gt 0}">
					<li id="${subject.subjectId}" onclick="populateQuestions('${pageContext.request.contextPath}/spring/fetchQuestions',${status.index},${form.user.cedulla},'${form.user.currentSemester}','${form.user.userType}');"><a href="#tabs-${status.index}">${subject.subjectName}</a></li>
					</c:if>	
					</c:forEach>
				</ul>

				<c:forEach items="${form.subjects}" var="subject" varStatus="status">
					<div id="tabs-${status.index}">



						<table style="font-family: arial;font-size: 15px;margin-top: 25px;" id="table-${status.index}">

							<tr style="background-color: #8181F7;">
								<th width="10%">Sr.No</th>
								<th width="60%">Question</th>
								<th width="30%">Options</th>
							</tr>


							<tr>
								<td width="5%"></td>
								<td width="30%"></td>

								<td width="65%">
									<table>
										<tr style="font-size: 10px; font-family: verdana;">
											<th width="25%">Everytime</th>
											<th width="25%">Often</th>
											<th width="25%">Sometimes</th>
											<th width="25%">Never</th>
										</tr>
									</table>
								</td>

							</tr>
						</table>






					</div>
				</c:forEach>
			</div>





			<br />
			<input type="submit" id="surveySubmit" value="Submit"  />
			<a href="spring/cancelSurvey">Cancel Survey</a>

		</form:form>
	</div>
</body>




</html>